<template>
    <div>
        <div class="searchHeader">
            <el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
            <el-button @click="listArticleByKeyWords" size="mini" type="primary" icon="el-icon-search">搜索文章</el-button>
        </div>
        <div>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="全部文章" name="all">
                    <ArticleInfos ref="all" :status="0" :edit="false" :del="false" :recover="false" :personal="false"></ArticleInfos>
                </el-tab-pane>
                <el-tab-pane label="已发布" name="publish">
                    <ArticleInfos ref="publish" :status="1" :edit="true" :del="true" :recover="false" :personal="false"></ArticleInfos>
                </el-tab-pane>
                <el-tab-pane label="草稿箱" name="draft">
                    <ArticleInfos ref="draft" :status="2" :edit="true" :del="true" :recover="false" :personal="false"></ArticleInfos>
                </el-tab-pane>
                <el-tab-pane label="回收站" name="coll">
                    <ArticleInfos ref="coll" :status="3" :edit="false" :del="true" :recover="true" :personal="false"></ArticleInfos>
                </el-tab-pane>
                <el-tab-pane label="我的" name="mine">
                    <ArticleInfos ref="mine" :status="5" :edit="true" :del="true" :recover="false" :personal="true"></ArticleInfos>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import ArticleInfos from '../../components/article/ArticleInfos.vue'
    export default {
        name: "ListArticle",
        data() {
            return {
                activeName: 'all',
                keyWords: ''
            }
        },
        components: {
            ArticleInfos
        },
        methods :{
            listArticleByKeyWords() { // 携带关键字查询文章
                this.$refs[this.activeName].initArticleInfos(this.keyWords);
            }
        }
    }
</script>

<style scoped>
    .searchHeader .articleSearchText {
        width: 300px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
</style>